<template>
  <div>
    <!-- <div>jerry:{{ jerryCount }} tom:{{ tomCount }}</div>
    tom:{{ count }}

    <div>{{ $store.getters.showTomCount }}</div>-->
    <button @click="add">+1</button>
    <div>{{ showTomCount }}</div>
  </div>
</template>

<script>
import bus from '@/utils/eventBus.js'
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  data() {
    return {

    }
  },
  computed: {
    // count() {
    //  return this.$store.state.tomCount
    // }
    ...mapState(['jerryCount', 'tomCount']),
    ...mapGetters(['showTomCount'])
  },
  mounted() {
    bus.$on('add-tom', data => { this.count += data })
  },
  methods: {
    ...mapMutations(['addJerry']),
    ...mapActions(['addJerrySync']),
    add() {
      // bus.$emit('add-jerry', 1)
      // this.$store.commit('addJerry',3)
      // this.$store.dispatch('addJerrySync', 3)
      this.addJerrySync(3)
    }
  }
}
</script>

<style>

</style>
